<template>
  <!-- 设备抗定位 -->
  <div>
    <!--    表格顶部-->
    <div class="flex-container">
      <!-- 前两个元素靠最右边 -->
      <div class="flex-group-right">
        <span style="textStyle">重保设备列表</span>
        <el-button class="btn" @click="dialogVisible1 = true"
                   icon="el-icon-plus">
          新建任务
        </el-button>
      </div>
      <!-- 后三个元素靠最左边 -->
      <div class="flex-group-left">
        <el-input v-model="searchText" class="align mainInput" placeholder="请输入内容"
                  style="width: 200px; margin-right: 25px;" clearable @keyup.enter.native="handleSearch"/>
        <el-button class="rightBtn" type="primary" @click="handleSearch">
          搜索
        </el-button>
      </div>
    </div>

    <!--    表格-->
    <div class="mainTable">
      <el-table ref="multipleTable" :data="currentTableData" tooltip-effect="dark" style="width: 100%"
                :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="deviceIp" label="设备IP" width="120" sortable/>
        <el-table-column prop="belongUnit" label="所属单位" width="120" sortable>
          <template slot-scope="scope">
            <div style="color: #1890ff;">
              {{ scope.row.belongUnit }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="realLocation" label="设备真实地理位置" show-overflow-tooltip/>
        <el-table-column prop="taskCreationTime" label="任务创建时间" show-overflow-tooltip/>
        <el-table-column prop="antiLocationProgress" label="抗定位任务进度" show-overflow-tooltip>
          <template slot-scope="scope">
            <jwd-progress :percentage="scope.row.antiLocationProgress"/>
          </template>
        </el-table-column>
        <el-table-column prop="antiLocationResultLocation" label="抗定位后设备地理位置" show-overflow-tooltip/>
        <el-table-column prop="locationErrorChange" label="定位误差变化" show-overflow-tooltip/>
        <el-table-column prop="locationLeakRiskChange" label="地理位置泄露风险变化" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="color: #1890ff;">
              {{ scope.row.locationLeakRiskChange }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentPageChange"
                     :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50, 100]"
                     :total="totalDataCount"
                     layout="total, sizes, prev, pager, next, jumper" style="margin-top: 20px; text-align: center;">
      </el-pagination>
    </div>


    <!-- 新建弹窗 -->
    <el-dialog title="新增设备信息" :visible.sync="dialogVisible1" width="40%">
      <div>
        <!-- 前两行 -->
        <el-row :gutter="20" class="form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备IP地址：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="input1" placeholder="请输入"/>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备归属组织：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="input2" placeholder="请输入"/>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备类型：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="input3" placeholder="请输入"/>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              状态：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="input4" placeholder="请输入"/>
          </el-col>
        </el-row>
        <!-- 后两行 -->
        <el-row :gutter="20" class="form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备信息描述(选填)：
            </div>
          </el-col>
          <el-col :span="20">
            <el-input v-model="input5" placeholder="请输入"/>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              备注：
            </div>
          </el-col>
          <el-col :span="20">
            <el-input v-model="input6" placeholder="请输入"/>
          </el-col>
        </el-row>
      </div>

      <!-- 两个按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import jwdProgress from "@/components/jwdProgress/index.vue";

export default {
  data() {
    return {
      searchText: "",
      activeName: "first",
      dialogVisible: false,
      dialogVisible1: false,
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的数据条数
      totalDataCount: 0, // 总数据量，初始为0，将在数据加载时设置
      tableData: [],
      options: [
        {value: "IP1", label: "192.168.1.1"},
        {value: "IP2", label: "192.168.1.2"},
        {value: "IP3", label: "192.168.1.3"},
      ],
    };
  },
  components: {
    jwdProgress,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSearch() {
      // 假设我们根据 deviceIp 和 belongUnit 进行搜索
      const searchText = this.searchText.toLowerCase();
      this.tableData = this.tableData.filter(item =>
        item.deviceIp.toLowerCase().includes(searchText) ||
        item.belongUnit.toLowerCase().includes(searchText)
      );
    },
    handleSelectiselection(val) {
      console.log("选中的行：", val);
      // 在这里处理选中行的逻辑
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 当改变每页显示条数时重置页码为1
    },
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 从 tableData 中删除指定的行
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  computed: {
    currentTableData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },
  created() {
    this.tableData = [
      {
        deviceIp: '192.168.1.1',
        belongUnit: '北京分公司',
        realLocation: '北京市朝阳区',
        taskCreationTime: '2023-04-01 12:00:00',
        antiLocationProgress: '80',
        antiLocationResultLocation: '上海市浦东新区',
        locationErrorChange: '5KM->10KM',
        locationLeakRiskChange: '高风险->低风险',
      },
      {
        deviceIp: '192.168.1.2',
        belongUnit: '上海分公司',
        realLocation: '上海市浦东新区',
        taskCreationTime: '2023-04-02 14:30:00',
        antiLocationProgress: '60',
        antiLocationResultLocation: '广州市天河区',
        locationErrorChange: '3KM->20KM',
        locationLeakRiskChange: '中风险->低风险',
        // 其他字段...
      },
      {
        deviceIp: '192.168.1.3',
        belongUnit: '广州分公司',
        realLocation: '广州市天河区',
        taskCreationTime: '2023-04-03 09:45:00',
        antiLocationProgress: '90',
        antiLocationResultLocation: '深圳市南山区',
        locationErrorChange: '2KM->5KM',
        locationLeakRiskChange: '低风险->极低风险',
        // 其他字段...
      }

    ],
      this.totalDataCount = this.tableData.length; // 设置总数据量
  }
}
</script>

<style lang="scss" scoped>


.mainTable {
  padding: 15px;
  height: 85vh;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中对齐 */
}

.btn {
  margin-left: 60px;
  background: linear-gradient(228deg, #FFC04B 0%, #FFA216 100%);
  color: #fff;
  border-radius: 4px 4px 4px 4px;
}

.flex-group-right {
  margin-left: 15px;
}

.rightBtn {
  margin-right: 55px;
  width: 106px;
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%);
  border-radius: 4px 4px 4px 4px;
}

.textStyle {
  margin-left: 5px;
  width: 96px;
  height: 22px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #535A6C;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

::v-deep .el-pager li.active{
  background: linear-gradient( 270deg, #2DBFFD 0%, #0E5FFF 100%) !important;
  color: white !important;
}
</style>
